<template>
    <!-- 是否启用 vue-router 模式。 
        启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。 
    -->
    <el-menu
        default-active="1"
        active-text-color="#ffd04b"
        background-color="#2d3436"
        text-color="#fff"
        :collapse="!isCollapse"
        router
    >
        <el-sub-menu v-for="item in menuList" :key="item.id" :index="item.path">
            <template #title>
                <el-icon><component :is="menuIconCom(item.iconCls)" /></el-icon>
                <span>{{ item.label }}</span>
            </template>

            <el-menu-item
                v-for="subItem in item.children"
                :key="subItem.id"
                :index="subItem.path"
                style="margin-left:11px"
                >{{ subItem.label }}</el-menu-item
            >
        </el-sub-menu>
    </el-menu>
</template>

<script setup lang="ts">
import { useMenuStore } from '@/stores/menu'
import { computed } from 'vue'
import {
    Location,
    Grid,
    Setting,
    Service,
    User,
    Aim,
    Goods,
    Present,
    Calendar,
    OfficeBuilding,
    School,
} from '@element-plus/icons-vue'
defineProps({ isCollapse: Boolean })
const menuStore = useMenuStore()
const menuList = computed(() => menuStore.list) //动态菜单数据

const menuIconCom = icon => {
    switch (icon) {
        case 'el-icon-user':
            return Location
        case 'el-icon-setting':
            return Setting
        case 'el-icon-service':
            return Service
        case 'el-icon-user-solid':
            return User
        case 'el-icon-office-building':
            return Aim
        case 'el-icon-goods':
            return Goods
        case 'el-icon-camera':
            return Present
        case 'el-icon-help':
            return Calendar
        case 'el-icon-student':
            return OfficeBuilding
        case 'el-icon-project':
            return School
        default:
            return Grid
    }
}

//获取菜单数据
</script>

<style scoped></style>
